<template>
    <div class="detail">
        <VHeader title="认领任务详情"/>
        <div class="title" v-text="item.title"></div>
        <div class="thumb">
            <img :src="item.thumbImage" width="100%">
        </div>
        <div class="content" v-html="item.contents"></div>
        <div class="contact">
            <div class="flex"><div class="muted">联系人：</div><div>{{item.contactName}}</div></div>
            <div class="flex"><div class="muted">联系电话：</div><div><a :href="'tel:'+item.contactMobile" class="orange">{{item.contactMobile}}</a></div></div>
            <div class="flex"><div class="muted">发布时间：</div><div>{{item.createTime}}</div></div>
            <div class="flex"><div class="muted">申请：</div><div><span :class="'status- status-'+item.status">{{item.status|myOrderStatus}}</span></div></div>
        </div>
        <div class="flex flex-center buttons">
            <button v-if="item.status === 1" class="apply" @click="apply">我要认领该任务</button>
<!--            <button v-if="item.status === 2" class="complete" @click="complete">我已完成任务</button>-->
        </div>
    </div>
</template>

<script>
    import {Dialog} from 'vant';
    export default {
        data(){
            return {
                item: {},
            }
        },
        methods: {
            async getItem(id){
                let res = await this.$http({
                    method: 'api.diandan.getRecordDetail',
                    id,
                });
                this.item = res.data.info;
            },
            apply(){
                Dialog.confirm({
                    title: '确认',
                    message: '您确定认领该任务吗？'
                }).then(async () => {
                    await this.$http({
                        method: 'api.diandan.join',
                        id: this.$route.params.id,
                    });
                    Dialog.alert({
                        title: '成功',
                        message: '已成功认领该任务'
                    }).then(() => {
                        this.$router.push('/user');
                    });
                }).catch(()=>{})
                
            },
            complete(){
                Dialog.confirm({
                    title: '确认',
                    message: '您确定已经完成此任务吗？'
                }).then(async () => {
                    await this.$http({
                        method: 'api.diandan.finish',
                        id: this.$route.params.id,
                    });
                    Dialog.alert({
                        title: '成功',
                        message: '已确认该任务，请等待后台审核'
                    }).then(() => {
                        this.$router.push('/user');
                    });
                }).catch(()=>{})
        
            }
        },
        mounted() {
            this.getItem(this.$route.params.id);
        }
    }
</script>

<style lang="scss" scoped>
    .detail {
        font-size:14px;
        padding: 15px;
        .title {
            font-size: 150%;
            padding: 0.2rem 0;
            border-bottom: 1px solid #378EEF;
            text-align: center;
        }
        .thumb {
            margin: 0.5rem 0;
        }
        .contact {
            margin: 0.3rem 0;
            padding: 0.2rem 0;
            border-top: 1px dashed #AAAAAA;
            > div {
                padding: 0.15rem 0;
            }
            .muted {
                min-width: 70px;
                color:#999999;
            }
            .orange {
                color: #EE6F2D
            }
        }
        .buttons {
            margin-top: 0.5rem;
            .apply {
                border:0;
                border-radius: 5px;
                color: white;
                font-size: 130%;
                padding: 0.2rem 0;
                width: 85%;
                background-color: #F65D5D;
            }
            .complete {
                border:0;
                border-radius: 5px;
                color: white;
                font-size: 130%;
                padding: 0.2rem 0rem;
                width: 85%;
                background-color: #F65D5D;
            }
        }
    }
    .status- {
        padding:2px 5px;
    }
    .status-0{
        border: 1px solid #b5bbbe;
        color: #b5bbbe;
    }
    .status-1{
        border: 1px solid #F65D5D;
        color: #F65D5D;
    }
    .status-2{
        border: 1px solid #378EEF;
        color: #378EEF;
    }
    .status-3{
        border: 1px solid #0A930A;
        color: #0A930A;
    }
    .status-4{
        border: 1px solid #FFA518;
        color: #FFA518;
    }
</style>